<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogShow"
      width="45%"
      @close="closeDialog"
    >
      <el-form
        :model="formData"
        ref="formRef"
        :rules="formRules"
        label-width="80px"
        :inline="true"
        size="normal"
      >
        <el-form-item label="归属学科" prop="subject_id">
          <el-select
            placeholder="归属学科"
            v-model="formData.subject_id"
            @change="changeSelect"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.subject_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属目录" prop="subject_id">
          <el-select placeholder="归属目录" v-model="formData.directory_id">
            <el-option
              v-for="item in directoryList"
              :key="item.id"
              :label="item.directory_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标签名称" prop="tag_name">
          <el-input
            style="width: 180px"
            v-model="formData.tag_name"
            placeholder="请输入标签名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formData.sort"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否显示" prop="is_show">
          <el-switch
            v-model="formData.is_show"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="dialogShow = false">取消</el-button>
        <el-button size="small" @click="btnOk">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addtagApi, edittagApi } from "@/api/tag";
import { getdirectoryListApi } from "@/api/directory";
export default {
  name: "Addtag",
  props: {
    subjectList: {
      type: Array,
    },
  },
  created(){
    this.changeSelect()
  },
  data() {
    return {
      directoryList: [],
      dialogShow: false, //控制弹框
      formData: {
        is_show: 1, //显示隐藏
        sort: 10, //排序
        subject_id: "", // 学科ID
        directory_id: "", //目录id
        tag_name: "", //标签名称
      }, //表单数据
      formRules: {
        is_show: [{ required: true, message: "请输入", trigger: "blur" }],
        sort: [{ required: true, message: "请输入", trigger: "blur" }],
        subject_id: [{ required: true, message: "请输入", trigger: "blur" }],
        directory_id: [{ required: true, message: "请输入", trigger: "blur" }],
        tag_name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  computed: {
    title() {
      return this.formData.id ? "修改标签" : "添加标签";
    },
  },
  methods: {
    // 获取目录
    async changeSelect() {
      this.directoryList = [];
      const { list } = await getdirectoryListApi({
        subject_id: this.formData.subject_id,
        page: 1,
        limit: 10000,
      });
      this.directoryList = list;
    },
    closeDialog() {
      this.formData = {
        is_show: 1, //显示隐藏
        sort: 10, //排序
        subject_id: "", // 学科ID
        directory_id: "", //目录id
        tag_name: "", //标签名称
      };

      this.$refs.formRef.resetFields();
    },

    // 提交数据
    async btnOk() {
      // 验证表单
      try {
        await this.$refs.formRef.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        // 修改数据
        await edittagApi(this.formData);
        this.$message.success("修改成功");
      } else {
        // 新增数据
        await addtagApi(this.formData);
        this.$message.success("添加成功");
      }
      this.$emit("changeItem");
      this.dialogShow = false;
    },
  },
};
</script>

<style></style>
